<template>
  <div class="partytime">
    <title-main title="党员活动时间"></title-main>
    <div class="bottom">
      <div class="lineEchart" ref="lineEchart"></div>
    </div>
  </div>
</template>
<script setup>
import { ref, inject, onMounted } from 'vue'
const echarts = inject('echarts')
let lineEchart = ref(null)
let myEchart = null
let data = {
  xdata: ['小于5天', '5-10天', '10-15天', '15-20天', '20天以上'],
  ydata: [7, 8, 8, 7, 9]
}
onMounted(() => {
  setEchart()
})
const setEchart = () => {
  if (myEchart != null && myEchart != '' && myEchart != undefined) {
    myEchart.dispose() //销毁
  }
  myEchart = echarts.init(lineEchart.value, null, { renderer: 'svg' })
  let option = {
    tooltip: {
      trigger: 'axis',
      textStyle: {
        fontSize: 16 // 字体大小
      },
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '15%',
      left: '2%',
      right: '10%',
      bottom: '8%',
      containLabel: true
    },
    xAxis: {
      data: data.xdata,
      axisLabel: {
        color: '#fff',
        fontSize: 12
        // rotate: 45
      },

      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#32AFFF'
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '单位：次',
        nameTextStyle: {
          color: '#ffff',
          fontSize: 14
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#32AFFF'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#fff',
          fontSize: 14
        },
        splitLine: {
          //修改背景线条样式
          show: true, //是否展示
          lineStyle: {
            type: 'dashed',
            color: '#5DC0FF',
            opacity: 0.35
          }
        }
      }
    ],
    series: [
      {
        name: '次数',
        type: 'line',
        smooth: true, //是否平滑曲线显示
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        symbolSize: 10,
        lineStyle: {
          color: '#29c1d0' // 线条颜色
        },
        itemStyle: {
          color: '#14ffdb',
          shadowBlur: 15,
          shadowColor: '#14ffdb',
          shadowOffsetX: 0,
          shadowOffsetY: 0
        },
        areaStyle: {
          //区域填充样式
          //   normal: {
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: 'rgba(38, 201, 255, 0.68)' },
              { offset: 0.5, color: 'rgba(38, 201, 255, 0.2)' },
              { offset: 0.8, color: 'rgba(38, 201, 255, 0)' }
            ],
            false
          ),

          shadowColor: 'rgba(255, 197, 20, 1)', //阴影颜色
          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          //   }
        },
        data: data.ydata
      }
    ]
  }
  myEchart.setOption(option)
}
</script>
<style scoped lang="scss">
.partytime {
  margin-left: 35px;
  .bottom {
    .lineEchart {
      width: 600px;
      height: 370px;
      transform: translateX(-25px);
    }
  }
}
</style>
